<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
    >
      <template v-if="logistics.data.length">
        <Timeline>
          <TimelineItem v-for="(item, index) in logistics.data" :key="index">
            <p class="time">{{ item.time }}</p>
            <p class="content">{{ item.context }}</p>
          </TimelineItem>
        </Timeline>
      </template>
      <template v-else>
        <div
          style="width: 100%;background-color: #f8f8f9; text-align: center;padding: 10px"
        >
          暂无物流信息
        </div>
      </template>

      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button type="primary" @click="hide()" :loading="loadingBtn">
          <span v-if="!loadingBtn">确定</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'order-logistics-tracking',
    data() {
      return {
        isShowModal: false,
        loadingBtn: false,
        logistics: {
          data: []
        },
        title: '物流跟踪'
      };
    },
    methods: {
      // 显示模态框
      show(row) {
        this.isShowModal = true;
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .post('/orderMall/getOrderMallById', {
            params: { mallOrderId: row.mallOrderId }
          })
          .then(res => {
            console.log(res);
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              // this.$Message.success('操作成功.');
              if (res.data.logistics) {
                this.logistics = JSON.parse(res.data.logistics);
              }
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查看订单详情接口报错',
                duration: 0
              });
            }
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
        this.logistics.data = [];
      }
    }
  };
</script>

<style scoped lang="less"></style>
